<template>
  <section>
    <el-card
      class="box-card"
      :key="itemIndex"
      v-for="(item, itemIndex) in workflowTree"
      style="margin-bottom: 10px;"
    >
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;"
          >{{ item.name }} ({{ item.list.length }})</span
        >
      </div>
      <el-row :gutter="10">
        <el-col
          :key="index"
          :span="6"
          v-for="(child, index) in item.list"
          style="height: 74px;width: 250px;"
          @mouseenter.native="mouseenter(child)"
          @mouseleave.native="mouseleave()"
          @click.native="flowNew(child)"
        >
          <div class="item_tree_active" v-if="child.check">
            <div style="float:left;padding-top:19px;margin:0 8px">
              <i class="btn_cls" style="color:#FFF" :class="child.icoName"></i>
            </div>
            <div style="float: left;padding-top: 20px;width: 73%">
              <el-tooltip
                :disabled="child.name.length <= 10"
                :content="child.name"
                placement="top"
              >
                <div
                  style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                >
                  {{ child.name }}
                </div>
              </el-tooltip>
              <!--                <div style="height: 16px;margin-top: 5px;">开始流程</div>-->
            </div>
            <div style="float:right;padding-top: 20px;">
              <div class="icon-color">
                <i class="fa fa-ellipsis-v" style="margin-right: 10px;"></i>
              </div>
            </div>
          </div>
          <div class="item_tree" v-else>
            <div style="float:left;padding-top:19px;margin:0 8px">
              <i
                class="btn_cls"
                :style="{ color: child.icoColor }"
                :class="child.icoName"
              ></i>
            </div>
            <div style="float: left;padding-top: 20px;width: 73%">
              <el-tooltip :content="child.name" placement="top">
                <div
                  style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                >
                  {{ child.name }}
                </div>
              </el-tooltip>
            </div>
            <div style="float:right;padding-top: 20px">
              <div class="icon-color">
                <i class="fa fa-ellipsis-v" style="margin-right: 10px;"></i>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";

export default {
  name: "flowAdd",
  created() {},
  mounted() {
    this.getWorkflowTreeF();
  },
  data() {
    return {
      workflowTree: []
    };
  },
  computed: {
    ...mapGetters({})
  },
  methods: {
    getWorkflowTreeF() {
      this.API.getWorkflowTree().then(res => {
        this.workflowTree = res.data;
        this.workflowTree.map(item => {
          if (item.list) {
            item.list.map(child => {
              this.$set(child, "check", false);
            });
          }
        });
      });
    },
    mouseenter(row) {
      this.workflowTree.map(item => {
        if (item.list) {
          item.list.map(child => {
            if (child.id === row.id) {
              child.check = true;
            } else {
              child.check = false;
            }
          });
        }
      });
    },
    mouseleave() {
      this.workflowTree.map(item => {
        if (item.list) {
          item.list.map(child => {
            child.check = false;
          });
        }
      });
    },
    flowNew(row) {
      console.log(row, "111111111");
      this.workflowTree.map(item => {
        if (item.list) {
          item.list.map(child => {
            if (child.id === row.id) {
              child.check = true;
            } else {
              child.check = false;
            }
          });
        }
      });
      let routeData = this.$router.resolve({
        path: "/workflow/apply",
        query: { flowId: row.id }
      });

      // this.openPage(routeData.href);
      this.openTabPage(routeData.href);
    },
    // 过滤分类
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.searchDto.categoryId = val.id;
      this.getPageData();
    },
    // 获取流程类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "WORKFLOW", parentId: 0 }).then(res => {
        this.categoryList = [];
        if (res.data) {
          this.categoryList.unshift({
            name: "全部",
            id: "",
            children: res.data
          });
        }
      });
    },
    // 工作流程分页列表
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      console.log(tem, "search");
      this.API.getWorkflowPageList(tem).then(res => {
        this.pageData = res.data;
      });
    },
    //   //数据流程删除
    delWorkFlow(row) {
      this.$confirm("确认删除当前流程?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteWorkflowById(tem).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    // 编辑流程
    editWorkFlow(row) {
      let data = "/design.html#/?operate=update&flowId=" + row.id;
      window.open(data, "_blank");
    },
    // 发布流程
    publishWorkFlow(row) {
      this.$confirm("确认发布当前流程?", "提示", {})
        .then(() => {
          if (row.id) {
            this.API.publishWorkflowById({ id: row.id }).then(res => {
              this.success("发布流程成功");
            });
          }
        })
        .catch(() => {});
    },
    // 新建流程
    newWorkFlow() {
      let data = "/design.html#/?operate=create";
      window.open(data, "_blank");
    },
    clear() {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        keywords: ""
      };
      this.getPageData();
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
@import "../../../styles/vars";

.el-card {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.item_tree {
  background: #f4faff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-left: 10px;
  cursor: pointer;
  height: 64px;
}

.item_tree_active {
  background: $color-primary;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-left: 10px;
  height: 64px;
  cursor: pointer;

  div {
    color: white;
  }
}

.btn_cls {
  /*height:15px;*/
  /*border-radius:40px;*/
  /*border: none;*/
  font-size: 23px !important;
  /*padding: 10px;*/
  margin-right: 2px;
}
</style>
